<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>课程学习</title>
    <div data-th-replace="layout/user/user-center-head"></div>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta content="email=no" name="format-detection">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--第三方插件样式 引入-->
    <link th:href="@{{path}/front/web/v3/css/playStyle.min.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
    <link th:href="@{{path}/front/web/v3/css/plugins/ion.rangeSlider/ion.rangeSlider.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
    <link th:href="@{{path}/front/web/v3/css/plugins/ion.rangeSlider/ion.rangeSlider.skinHTML5.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
    <link th:href="@{{path}/front/web/v3/css/plugins/iCheck/custom.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
</head>
<body>
    <header class="mode-header__wrap">
        <div class="container-fluid mode-header">
            <nav class="navbar">
                <div>
                    <div class="navbar-header header-logo">
                        <a class="navbar-brand c-ccc" id="goToBack"  title="返回" data-return>
                            <i class="fa fa-chevron-left fs24" style="margin-top: 15px"></i>
                        </a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <p class="navbar-text">
                            <span class="fs14 c-ccc">正在播放：</span>
                            <span class="fs14 c-info" id="catalogName"></span>
                        </p>
                        <ul class="nav navbar-nav navbar-right play-r-nav">
                            <!--推荐课程功能后续添加-->
                            <!--<li class="mr10">
                                <a href="javascript:void(0);" class="c-ccc" id="recommend">
                                    <i class="iconfont icon-fasongx mr10"></i>推荐课程
                                </a>
                            </li>-->
                            <li class="mr10">
                                <a href="javascript:void(0);" class="c-ccc" id="ppCommentBtn">
                                    <i class="iconfont icon-xiaoxi mr10"></i>学员评价
                                </a>
                            </li>
                            <li class="mr10">
                                <a href="javascript:void(0);" class="c-ccc oShareBtn" th:attr="data-mobile=${mobilePath}+${mobilePathShare},data-share=!${#maps.isEmpty(courseBuyRecord['course']['imageMap'])} and !${#maps.isEmpty(courseBuyRecord['course']['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(courseBuyRecord['course']['imageMap']['pcUrlMap']['large'])}? ${courseBuyRecord['course']['imageMap']['pcUrlMap']['large']}:''">
                                    <i class="iconfont icon-jichutubiao- mr10"></i>分享
                                </a>
                            </li>
                            <li class="u-live-quiz" id="qa-teacher-box"></li> <!--向老师提问-->
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="u-bg">
        <div class="live-main pr">
            <section class="uCenter-box pa" id="uCenter-box">
                <div class="play-page__wrap u-play-page__wrap">
                    <div class="play-page-cont">
                        <!--左侧播放器位置 开始-->
                        <section class="play-l-player__wrap">
                            <div class="play-l-player-box u-play-l-player-box">
                                <div id="play-video-live-box" style="height: 100%;">
                                    <!--嵌套播放器位置-->
                                    <!--<script src="http://v.96koo.net/static/video/js/creatVideoPlayer.js?width=960&height=540&videoId=d27e07ed616d7b75aed9c9dc310fddb1"></script>-->
                                </div>
                                <!--<header class="broadcast-header">
                                    <div class="mode-headerBox">
                                        <div class="navbar-header header-logo">
                                            <a class="fs18 c-ccc" th:href="@{/web/uc/course/user/index}" title="返回" data-return>
                                                <i class="fa fa-chevron-left fs24" style="margin-top: 15px"></i>
                                            </a>
                                        </div>
                                        <div class="collapse navbar-collapse">
                                            <p class="navbar-text">
                                                <span class="fs14 c-ccc">正在播放：</span>
                                                <span class="fs14 c-fff"></span>
                                                <span class="fs14 c-fff" id="catalogName"></span>
                                            </p>
                                        </div>
                                    </div>
                                </header>-->

                                <!--文章专栏区域 开始-->
                                <div class="play-article__wrap hide">
                                    <div class="sidebar-collapse">
                                        <article class="ml20 mr20" id="article_container">
                                            这只是专栏正文 区域
                                        </article>
                                    </div>
                                </div>
                                <!--文章专栏区域 结束-->
                            </div>
                        </section>
                        <!--左侧播放器位置 结束-->
                        <!--右侧目录区域 开始-->
                        <section class="play-r-menu__wrap">
                            <div class="play-r-menu">
                                <!--<section class="play-r-menu-teach__wrap">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="#">
                                                <img class="media-object img-circle" alt="64x64" src="./v3/img/default/default-face.gif" width="50" height="50">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading"><span class="fs14 c-666">节大式</span></h4>
                                            <span class="fs12 c-999">首席专家</span>
                                        </div>
                                        <div class="media-right pt10">
                                            <a href="javascript: ;" id="pp-toTeach-tj-btn"><button type="button" class="btn btn-block btn-w-m btn-danger unRadius">向Ta提问</button></a>
                                        </div>
                                    </div>
                                </section>-->
                                <div class="">
                                    <section class="c-info-tab play-r-menu-tab clearfix">
                                        <h4 class="active" data-tab="catalogs"><span class="fs16 c-333">目录</span></h4>
                                        <h4 class="" data-tab="notes"><span class="fs16 c-333">笔记</span></h4>
                                    </section>
                                </div>
                                <section class="play-menu-box u-play-menu-box">
                                    <div class="play-menu-box-pr">
                                        <aside class="play-menu-sh-btn__wrap">
                                           <span class="play-menu-sh-btn bg-info hand c-fff" title="收起">
                                               <i class="fa fa-angle-double-right"></i>
                                           </span>
                                        </aside>
                                        <div class="sidebar-collapse">
                                            <!--讲师ID，用于加载提问老师-->
                                            <input type="hidden" id="teacherId" value="0"/>
                                            <!--课程ID，普通课程的ID-->
                                            <input type="hidden" id="courseId" th:value="${courseId}"/>
                                            <!--默认播放的目录节点ID，如果是0，则自动获取第一个节录播放-->
                                            <input type="hidden" id="catalogId" th:value="${catalogId}"/>
                                            <!-- 当前正常在播放的节点ID -->
                                            <input type="hidden" id="playId" th:value="${catalogId}"/>
                                            <!-- 当前正常在播放的节点的资源类型 -->
                                            <input type="hidden" id="materialTypeKey"/>
                                            <!-- 播放总课程链接类型 -->
                                            <input type="hidden" id="courseTypeKey" th:value="${courseBuyRecord['courseTypeKey']}"/>
                                            <!-- 课程名，用于设置最左上方的标题，套餐课程用不到 -->
                                            <input type="hidden" id="courseName" th:value="${#maps.isEmpty(courseBuyRecord['course'])}?'':${courseBuyRecord['course']['courseName']}"/>
                                            <!-- 购买记录中的课程ID -->
                                            <input type="hidden" id="buyCourseId" th:value="${courseBuyRecord['courseId']}"/>
                                            <!--学习记录-->
                                            <input type="hidden" id="duration" th:attr="data-duration=${courseId}+'-'+${catalogId}" th:if="${userPlayRecord}!=null" th:value="${userPlayRecord['duration']}"/>
                                            <!--目录 开始-->
                                            <article data-tab="catalogs">
                                                <div class="mr10 ml20">
                                                    <header th:if="${courseBuyRecord['courseTypeKey']}=='PACKAGE'" class="bg-fb hLh30 pl10 pr10 clearfix" style="margin-left: -20px;">
                                                        <input type="hidden" id="index" th:value="${courseBuyRecord['index']}"/>
                                                        <ul id="package-course-data-box" style="display: none;">
                                                            <!--已激活-->
                                                            <th:block th:if="${courseBuyRecord['status']}==1" th:each="pc,inx : ${courseBuyRecord['courseBuyPackageCourseList']}">
                                                                <li th:attrappend="data-course-id=${pc['courseId']}" th:text="${pc['course']['courseName']}"></li>
                                                            </th:block>
                                                            <!--未激活-->
                                                            <th:block th:if="${courseBuyRecord['status']}==0" th:each="pc,inx : ${courseBuyRecord['course']['packageCourseList']}">
                                                                <li th:if="${pc['packageType']}==1" th:attrappend="data-course-id=${pc['courseId']}" th:text="${pc['course']['courseName']}"></li>
                                                            </th:block>
                                                        </ul>
                                                        <aside data-type="2" class="pull-right select-course">
                                                            <a href="javascript:void(0);" class="c-999 fs12">下一套餐课 <i class="fa fa-angle-right"></i></a>
                                                        </aside>
                                                        <aside data-type="1" class="pull-left select-course">
                                                            <a href="javascript:void(0);" class="c-999 fs12"><i class="fa fa-angle-left"></i> 上一套餐课</a>
                                                        </aside>
                                                        <aside style="width: 172px;text-align: center;margin: 0 5px;" class="pull-left hLh30 ellipsis">
                                                            <span class="c-999 fs12" id="package-course-name-box"></span>
                                                        </aside>
                                                    </header>

                                                    <div style="height: 100%;">
                                                        <div class="mt10" id="play-catalog">
                                                        <!-- 目录数据 -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                            <!--目录 结束-->

                                            <!--笔记 开始-->
                                            <article class="hide" data-tab="notes">
                                                <div class="pt10 pb10 pr10 pl10">
                                                    <div>
                                                        <section class="c-comment__wrap">
                                                            <textarea id="course-note-context" class="form-control" rows="5" placeholder="输入对此节的学习笔记，课后复习巩固..." style="resize: none;"></textarea>
                                                        </section>
                                                        <section class="mt10 clearfix">
                                                            <aside class="pull-right">
                                                                <span class="mr10 hide">
                                                                    <small class="fs12 c-danger">
                                                                        <i class="fa fa-exclamation-circle"></i>
                                                                        <samp id="note-error-box">笔记内容不能为空！</samp>
                                                                    </small>
                                                                </span>
                                                                <button type="button" class="btn btn-info btn-sm" id="save-note-btn">记笔记</button>
                                                            </aside>
                                                            <aside class="pull-left">
                                                                <span class="fs12 c-ccc">不能少于12个字</span>
                                                            </aside>
                                                        </section>
                                                    </div>
                                                    <!-- 目录笔记列表 -->
                                                    <div class="pt10" id="course-note-list-box">
                                                        <section class="c-head-title">
                                                            <h6><span class="fs16 c-333">笔记内容</span></h6><hr/>
                                                        </section>
                                                        <!--无数据提示 开始-->
                                                        <section class="no-data__wrap">
                                                            <span class="no-data-ico"></span>
                                                            <p class="mt20"><span class="c-666">还没有人笔记，快快记录吧~~~</span></p>
                                                        </section>
                                                        <!--无数据提示 结束-->
                                                    </div>
                                                </div>
                                            </article>
                                            <!--笔记 结束-->
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </section>
                        <!--右侧目录区域 结束-->
                        <aside class="play-r-show__wrap">
                            <span class="play-r-show-btn c-666"><i class="fa fa-angle-double-left"></i> 展开目录</span>
                        </aside>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!--推荐课程内容结构 开始-->
    <textarea id="ele-r-comment_bx" class="hide">
        <div class="pl10 pr10 ml5 mr5">
            <section class="row r-list">
                <div class="col-md-6 col-lg-6" data-course="">
                    <div class="thumbnail course-list-item">
                        <section class="pr">
                            <aside class="cm-kc-num">
                                <span class="fs12 c-fff">
                                    6节</span>
                            </aside>
                            <a href="javascript:void(0)"><img class="lazy" width="100%" data-original="https://res.268xue.com/res/upload/yzl/course/20180416/67f38155139a6a2506d7daf94fae04fc_jpg/pc/large.jpg" src="https://res.268xue.com/res/upload/yzl/course/20180416/67f38155139a6a2506d7daf94fae04fc_jpg/pc/large.jpg" style="display: block;"></a>
                        </section>
                        <div class="caption">
                            <section class="cm-desc-txt__twoLine">
                                <a href="javascript:void(0)" class="fs14 c-333">二级建造师在线答疑</a>
                            </section>
                            <section class="mt10 mb5 clearfix">
                                <aside class="pull-right">
                                    <span class="ml5 fs12 c-999">视频</span>
                                    <span class="ml5 fs12 c-999"><i class="fa fa-user"></i>&nbsp;13</span>
                                </aside>
                                <aside class="pull-left">
                                    <span class="fs12 c-danger"><i class="fa fa-rmb"></i></span>
                                            <span class="fs16 c-danger">1888.0</span>
                                        </aside>
                            </section>
                        </div>
                    </div>
                </div>
            </section>
            <!--<p class="pt10 text-center fs16 c-333 r-hint">通过免费直播购买课程，还可领取 <span class="fs20">100</span> 元优惠券</p>
            <div class="text-center">
                <a href="javascript:void(0);" class="enroll">立即报名</a>
            </div>-->
        </div>
    </textarea>
    <!--推荐课程内容结构 结束-->

    <!--评价与反馈模态框内容结构 开始-->
    <textarea id="ele-comment_bx" class="hide">
        <h3><span class="fs20 unFw">评论与反馈</span></h3>
        <div class="mt20 ml10 mr10">
            <section>
                <p class="hLh30"><span class="fs16">1、课程质量-你觉得课程播放时是否足够流畅清晰，体验顺畅</span></p>
                <div class="ionRangeSlider__wrap"  data-comment="quality"></div>
                <ul class="oc-tip-txt clearfix">
                    <li><span class="fs12 c-999">非常差</span></li>
                    <li><span class="fs12 c-999 ml20 pl10">差</span></li>
                    <li class="text-center"><span class="fs12 c-999">正常</span></li>
                    <li class="text-right"><span class="fs12 c-999 mr20 pr10">好</span></li>
                    <li class="text-right"><span class="fs12 c-999">非常好</span></li>
                </ul>
            </section>
            <section class="mt20">
                <p class="hLh30"><span class="fs16">2、老师讲法-你觉得老师讲的做到重点突出，简直明了</span></p>
                <div class="ionRangeSlider__wrap" data-comment="teach"></div>
                <ul class="oc-tip-txt clearfix">
                    <li><span class="fs12 c-999">非常差</span></li>
                    <li><span class="fs12 c-999 ml20 pl10">差</span></li>
                    <li class="text-center"><span class="fs12 c-999">正常</span></li>
                    <li class="text-right"><span class="fs12 c-999 mr20 pr10">好</span></li>
                    <li class="text-right"><span class="fs12 c-999">非常好</span></li>
                </ul>
            </section>
            <section class="mt20">
                <p class="hLh30"><span class="fs16">3、综合感受-我对这节课的综合感受</span></p>
                <div class="ionRangeSlider__wrap" data-comment="feel"></div>
                <ul class="oc-tip-txt clearfix">
                    <li><span class="fs12 c-999">非常差</span></li>
                    <li><span class="fs12 c-999 ml20 pl10">差</span></li>
                    <li class="text-center"><span class="fs12 c-999">正常</span></li>
                    <li class="text-right"><span class="fs12 c-999 mr20 pr10">好</span></li>
                    <li class="text-right"><span class="fs12 c-999">非常好</span></li>
                </ul>
            </section>
            <section class="mt20">
                <p class="hLh30"><span class="fs16">4、偶尔吐槽-我还有其它的话要说，别拦着</span></p>
                <div class="form-control txtareaDiv" contenteditable="true" data-comment="comment"></div>
            </section>
        </div>
    </textarea>
    <!--评价与反馈模态框内容结构 结束-->

    <div data-th-replace="layout/user/user-common"></div>

    <script th:src="@{{path}/front/web/libs/plugins/ion-rangeSlider/ion.rangeSlider.min.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/libs/plugins/chosen/chosen.jquery.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/libs/plugins/iCheck/icheck.min.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:if="${vlasType}=='POLYV'" type="text/javascript" src="http://player.polyv.net/script/polyvplayer.min.js"></script>
    <script th:if="${vlasType}=='POLYV'" type="text/javascript" src="http://player.polyv.net/livescript/liveplayer.js"></script>
    <script th:src="@{{path}/front/web/business/course/play/user-play.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/play/load-html.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/play/play-record.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/play/note/course-note.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/exam/record/exam-get-answer.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/play/exercises/course-exercises.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/play/comment/catalog-comment.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/course/cou/course-guideBuy.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/common/shareFn.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/qrcode/qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script src="//view.csslcloud.net/js/_fix_.js"></script>
</body>
</html>